<template>
  <div class="hello">
    <div id="msg" style="font-size:1.5rem">
      在线:{{userCount}}人  &nbsp;&nbsp; 用户id:{{userId}}[{{userStatus}}]  &nbsp;&nbsp; 新加入id:{{joinUserId}} <br>
      {{chessInfo.groupAction}} &nbsp;&nbsp; 红方{{chessInfo.step1}}步 &nbsp;&nbsp; 黑方{{chessInfo.step2}}步
    </div>
    <canvas id="draw" width="1080" height="1247" style="width:100%"/>
    <div>
      <x-button mini type="primary" @click.native="join(1)">加入红方</x-button>
      <x-button mini type="primary" @click.native="join(2)">加入黑方</x-button>
      <x-button mini type="primary" @click.native="join(3)">左右互搏</x-button>
      <x-button mini type="primary" @click.native="restart">重新开始</x-button>
    </div>
    <alert v-model="isError" title="连接超时" content="连接服务器超时,请刷新页面再试"></alert>
  </div>
</template>

<script>
import chessImg from "../assets/chess.png";
import chessBoardBG from "../assets/chess_bg.jpg";
import ChessBoard from "./js/ChessBoard";//--
import ChessDraw from "./js/ChessDraw";
import {XButton,Alert  } from 'vux'
export default {
  name: 'Chess',
  components: {
    XButton,
    Alert 
  },
  data () {
    return {
        userId:null,
        userCount:null,
        joinUserId:null,
        userStatus:"红方",
        stage:null,
        chessBoard:null,
        chessDraw:null,
        chessInfo:{groupAction:"非进行中"},
        isError:false,
    }
  },
  mounted(){
      //this.stageScale=document.documentElement.clientWidth/1080;
      document.documentElement.style.fontSize="10px";
      this.init();
  },
  methods:{
    join(userId){
      let userStatus=userId==1?"红方":"黑方";
      if(userId==3){
        userStatus="双方";
      }
      this.userStatus=userStatus;
      this.chessDraw.setUserId(userId);
    },
    restart(){
      this.chessDraw.send({type:"init_board"});
    },
    init(){
      var canvas = document.getElementById('draw');
      this.stage = new createjs.Stage(canvas);
      let ws = new WebSocket(window.location.origin.replace("http://","ws://")+"/ws/chess_msg");
      ws.onerror = (msg)=>{
        this.isError=true;
        console.log("ss",msg);
      }
      ws.onmessage = (recv)=> {
        let data= JSON.parse(recv.data);
        console.log("msg=>",data);
        if(data.type=="join"){
          this.userId=data.userId;
          this.userCount=data.userCount;
          this.joinUserId=data.joinUserId;
        }else if(data.chessInfo){
          this.chessInfo=data.chessInfo;
          if(this.chessInfo.groupId>0){
            this.chessInfo.groupAction="当前"+(this.chessInfo.groupId==1?"红方":"黑方")+"走棋"
          }else{
            this.chessInfo.groupAction="非进行中"
          }
          if(this.chessInfo.win){
            this.chessInfo.groupAction=this.chessInfo.win;
          }
        }
        if(this.chessDraw){
          this.chessDraw.onmessage(data);
        }
      }
      this.chessDraw=new ChessDraw(this.stage,ws,{chessImg,chessBoardBG},(t)=>{
        t.drowBoard();
      });
      this.chessBoard=new ChessBoard(this.chessDraw);
    }
  }
}
</script>

